<template>
  <div class="catalog-container">
    <div class="left-section">
      <h2>Get Your FREE Catalog Now</h2>
      <img
        src="https://www.anbusafety.com/wp-content/uploads/2021/11/catalogue-300x163.jpg"
        alt="PPE Catalogue"
        class="catalog-img"
      />
      <p>
        Fill out the right part form to download free catalogs so you can choose the
        right PPE for your needs. We have a variety of personal protective equipment
        items available, including:
      </p>
      <ul class="ppe-list">
        <li>Safety Shoes and Boots</li>
        <li>Steel Toe Safety Gumboots</li>
        <li>Safety coverall and Overall</li>
        <li>Fire Retardant Coverall</li>
        <li>Safety Helmet and Bump Cap</li>
        <li>Safety Glasses and Goggle</li>
        <li>Safety Mask and Respirator</li>
        <li>Safety Gloves and Chemical gloves</li>
        <li>Safety Harness and Rope</li>
      </ul>
    </div>
    <div class="right-section">
      <div class="form-wrapper">
        <div class="form-header">
          <svg
            class="book-icon"
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
          </svg>
          <h3>Fill out the form to download the catalog</h3>
        </div>
        <form class="catalog-form">
          <div class="form-group">
            <label for="name">Name <span class="required">*</span></label>
            <input type="text" id="name" name="name" />
          </div>
          <div class="form-group">
            <label for="email">Email <span class="required">*</span></label>
            <input type="email" id="email" name="email" />
          </div>
          <div class="form-group">
            <label for="phone">Phone</label>
            <input type="tel" id="phone" name="phone" />
          </div>
          <div class="form-group">
            <label for="message">Message <span class="required">*</span></label>
            <textarea id="message" name="message" rows="5"></textarea>
          </div>
          <button type="submit" class="download-btn">
            <svg
              class="download-icon"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
              <polyline points="7 10 12 15 17 10" />
              <line x1="12" y1="15" x2="12" y2="3" />
            </svg>
            Download Now
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
// 这里暂时没有需要在setup中处理的逻辑，可根据实际需求添加
</script>

<style scoped lang="scss">
.catalog-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px;
  gap: 40px;

  .left-section {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 20px;

    h2 {
      color: #0b5d98;
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
    }

    .catalog-img {
      max-width: 300px;
      margin: 0 auto 20px;
      display: block;
      border: 1px solid #ddd;
    }

    p {
      margin-bottom: 15px;
      line-height: 1.5;
    }

    .ppe-list {
      list-style-type: disc;
      padding-left: 20px;

      li {
        margin-bottom: 5px;
      }
    }
  }

  .right-section {
    flex: 0 0 30%;
    max-width: 30%;

    .form-wrapper {
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 4px;

      .form-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        gap: 10px;

        .book-icon {
          color: #0b5d98;
        }

        h3 {
          font-size: 18px;
          font-weight: 600;
        }
      }

      .catalog-form {
        display: flex;
        flex-direction: column;
        gap: 15px;

        .form-group {
          display: flex;
          flex-direction: column;

          label {
            margin-bottom: 5px;
            font-size: 14px;
          }

          .required {
            color: red;
          }

          input,
          textarea {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;

            &:focus {
              outline: none;
              border-color: #0b5d98;
            }
          }

          textarea {
            resize: vertical;
          }
        }

        .download-btn {
          background-color: #0b5d98;
          color: white;
          border: none;
          padding: 10px 15px;
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          font-size: 16px;

          .download-icon {
            color: white;
          }

          &:hover {
            background-color: #084a7a;
          }
        }
      }
    }
  }
}
</style>